<template>
	<view :style="{backgroundImage: `url(${imgUrl}jb.png)`}" class="content">
		<!-- 约课类型 -->
		<view class="tabs">
			<view
				v-for="i, k in courseTabs" :key="k"
				v-if="store.storeType == 'gym'"
				:class="curTabIndex == k && 'selectTabs'"
				@click="curTabIndex = k; getList()"
			>
				{{ i.name }}
			</view>
		</view>
		<!-- 日期选择 -->
		<view class="dateList">
			<view
			v-for="i, k in dayArr" :key="k"
			:class="curDateIndex == k && 'selectDate'"
			@click="curDateIndex = k; getList()"
			>
				<text>{{ i.name }}</text>
				<view>{{ i.date }}</view>
			</view>
		</view>
		<!-- 教练、医生列表 -->
		<view v-for="item, k in list" :key="k" class="list flex">
			<u-avatar :src="item.avatar" size="120rpx" />
			<view class="u-border-bottom">
				<view class="flex">
					<view class="info">
						<view>{{ item.name }}<text>({{ item.levelName }})</text></view>
						<text v-if="store.storeType == 'gym'">课程时间: {{ item.courseTimeRange || '' }}</text>
					</view>
					<view class="period" v-if="store.storeType == 'gym'">
						<text>待约课时</text>
						<view>{{ item.periodCount || 0 }}</view>
					</view>
					<view
						v-if="store.storeType == 'gym'"
						class="reserv"
						:style="{color: `${statusList[item.status-1].color}`}"
					>
						{{ item.status ? statusList[item.status-1].text : '' }}
					</view>
					<view v-else class="reserv" @click="apply">申请</view>
				</view>
				<view class="tag" v-if="store.storeType == 'gym'">
					<u-tag
						v-for="v, i in ['减脂', '减脂', '减脂', '减脂', '减脂']" :key="i"
						:text="v"
						size="mini"
						bgColor="#f8f8f8"
						borderColor="#f8f8f8"
						color="#a6a6a6"
					/>
				</view>
				<view class="intro" v-else>{{ item.intro }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { imgUrl } from "@/utils/baseUrl.js";
import { sevenDay, courseType, getReservation } from '@/api/store.js';
export default {
	name:"appointmentOurse",
	props: {
		store: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			imgUrl,
			curDateIndex: 0,
			dayArr: [],
			curTabIndex: 0,
			courseTabs: [],
			list: [],
			statusList: [
				{text: '已约满', color: '#fe5e10'},
				{text: '预约', color: '#0dbc14'},
				{text: '已预约', color: '#999'},
				{text: '不可约', color: '#999'},
			]
		}
	},
	created() {
		this.initData()
	},
	methods: {
		// 请求组件数据
		async initData() {
			await sevenDay().then(res => this.dayArr = res)
			await courseType().then(res => this.courseTabs = res)
			this.getList()
		},
		// 获取预约列表
		getList() {
			const reservationType = this.courseTabs[this.curTabIndex].value
			const reservationData = this.dayArr[this.curDateIndex].completeDate
			getReservation({
				reservationType,
				reservationData,
				storeSign: this.store.sign
			}).then(res => this.list = res);
		},
		// 前往处方申请页面
		apply() {
			uni.navigateTo({
				url: `/pagesSubPack/prescription/apply?sign=${this.store.sign}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	background-repeat: no-repeat;
	background-size: 100% 100rpx;
	border-radius: 30rpx;
	box-shadow: 0px 0px 15rpx 15rpx #eee;
	min-height: 400rpx;
	padding-top: 24rpx;
}
.list {
	padding: 0 20rpx 30rpx 20rpx;
	.u-border-bottom {
		flex: 1;
		margin-left: 20rpx;
		padding-bottom: 20rpx;
	}
	.info > text, .intro {
		font-size: 23rpx;
		color: #8b8b8b;
	}
	.info {
		padding-bottom: 10rpx;
		flex: 1;
		view {
			color: #202020;
			font-size: 30rpx;
			margin-bottom: 10rpx;
			text {
				font-size: 22rpx;
				color: #999;
			}
		}
	}
	.reserv {
		width: 100rpx;
		text-align: center;
		font-size: 26rpx;
		color: #0dbc14;
		margin-left: 10rpx;
	}
	.period {
		text {
			font-size: 24rpx;
			color: #7d7d7d;
		}
		view {
			width: 75rpx;
			height: 50rpx;
			line-height: 50rpx;
			background-color: #f7f7f7;
			font-weight: bold;
			border-radius: 10rpx;
			margin: 15rpx auto 0 auto;
			border: 2rpx solid rgba(32,32,32,0.3);
			text-align: center;
		}
	}
	.tag, .intro {
		margin-top: 10rpx;
	}
	.tag {
		display: flex;
		gap: 6rpx;
	}
}
.tabs, .dateList {
	display: flex;
	justify-content: space-around;
}
.tabs > view {
	background-color: #ffc8ad;
	border-radius: 20rpx;
	color: #fff;
	padding: 10rpx 30rpx;
	font-size: 27rpx;
	&.selectTabs {
		background-color: #fe5e10;
	}
}
.dateList {
	padding: 30rpx 10rpx;
	> view {
		font-weight: bold;
		color: rgba(0, 0, 0, 0.26);
		view {
			font-size: 18rpx;
			margin: 15rpx 0;
		}
		&.selectDate {
			color: #202020;
			position: relative;
			&::after {
				content: '';
				width: 50%;
				height: 5rpx;
				background-color: #202020;
				border-radius: 20rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
}
</style>